/******************** 变量 ********************/
$paginator-select-disabled-bg-color: transparent;
$paginator-button-hover-border-color: transparent;
$paginator-button-border-color: transparent;

$paginator-color: (default, $border-color-base, transparent, $text-color), (hover, $border-color-hover, transparent, $text-color),
  (focus, $border-color-hover, transparent, $text-color), (active, $primary-color, transparent, $primary-color),
  (disabled, $border-color-disabled, $disabled-background, $text-color-disabled) !default;

$paginator-width: 0.24rem;
$paginator-height: $height-sm;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-paginator {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  color: $text-color;
  font-weight: $font-weight-regular;
  font-size: $font-size-sm;
  line-height: $line-height-sm;

  @include motion-state;

  .lv-select {
    width: auto;
    min-width: 1.02rem;
    max-width: 3rem;
  }

  .lv-select-wrapper,
  .lv-input {
    height: $paginator-height;
    line-height: $line-height-lg;
  }

  > div {
    margin-left: $margin-md;

    &:first-child {
      margin-left: 0;
    }
  }

  .lv-paginator-total-container {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    padding-right: $padding-md;
    color: nth(nth($paginator-color, 1), 4);
  }

  .lv-paginator-select-trigger {
    height: $paginator-height;
  }
}

.lv-paginator-selection {
  display: flex;
  align-items: center;

  .lv-paginator-selection-default {
    margin: 0;
  }

  .lv-paginator-selection-simple {
    margin: 0 $margin-xs;
  }
}

.lv-paginator-quick-jump {
  display: flex;
  align-items: center;
  color: $text-color-tertiary;

  .lv-input {
    width: 0.6rem;
    margin-left: $margin-xs;

    &.lv-input-size-default:not(textarea) {
      height: $paginator-height;
    }
  }
}

.lv-paginator-pages {
  display: flex;
}

.lv-paginator-jump-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $paginator-width;
  height: $paginator-height;
  text-align: center;
  cursor: pointer;
  user-select: none;

  &.disabled {
    color: $text-color-disabled;
  }

  &:hover {
    @include motion-state;
  }
}

.lv-paginator-icon-button {
  position: relative;
  color: $icon-color;

  i.lv-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover {
    color: $icon-color-hover;
  }

  &:active {
    color: $icon-color-active;
  }

  &.disabled {
    cursor: not-allowed;

    i.lv-icon {
      color: $icon-color-disabled;
    }
  }
}

.lv-paginator-jump-button.lv-paginator-number-button,
.lv-paginator-jump-button.lv-paginator-ellipsis-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: $paginator-width;
  height: $paginator-height;
  margin: 0 $margin-xs;
  padding: 0 $padding-sm;
  border: $border-width-base $border-style-base $paginator-button-border-color;
  border-radius: $border-radius-md;
}

.lv-paginator-jump-button.lv-paginator-ellipsis-button {
  position: relative;
  cursor: pointer;

  .lv-pagination-item-jump-icon {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -$margin-sm;
    margin-left: calc(#{$margin-xs} / 2);
    opacity: 0;
  }

  .lv-pagination-number-ellipsis {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    margin-top: -0.09rem;
    color: $icon-color;
    opacity: 1;
  }

  &:not(.disabled) {
    &:hover {
      .lv-pagination-item-jump-icon {
        color: $icon-color-hover;
        opacity: 1;
      }

      .lv-pagination-number-ellipsis {
        opacity: 0;
      }
    }
  }
}

.lv-paginator-number-button {
  color: nth(nth($paginator-color, 1), 4);

  &:hover {
    border-color: $border-color-hover;
  }

  &.selected {
    color: $primary-color;
    border-color: $primary-color;

    @include motion-state;
  }
}

/* page disable , item disable */

/* TODO: disabled优化 */
.lv-paginator.disabled {
  cursor: not-allowed;

  .lv-paginator-total-container {
    color: $text-color-disabled;
  }

  .lv-paginator-select-trigger {
    cursor: not-allowed;
  }

  .lv-paginator-jump-button {
    cursor: not-allowed;

    i {
      color: $icon-color-disabled;
      cursor: not-allowed;
    }
  }

  .lv-paginator-number-button {
    color: nth(nth($paginator-color, 5), 4);

    &:hover {
      border-color: $paginator-button-hover-border-color;
    }

    &.selected {
      border-color: $border-color-disabled;
    }
  }

  .lv-paginator-quick-jump {
    color: $text-color-disabled;
  }
}

.lv-text-color-tertiary {
  color: nth(nth($paginator-color, 5), 4);
}

.lv-paginator-simple {
  .lv-paginator-selection {
    .lv-paginator-selection-simple {
      display: flex;
      align-items: center;
      justify-content: center;

      .lv-paginator-number-select {
        min-width: 0.52rem;
      }
    }

    .lv-paginator-deliver {
      margin: 0 $margin-sm;
    }

    .lv-paginator-total-page {
      width: auto;
      min-width: $paginator-width;
    }

    .lv-select-wrapper {
      border: none;

      .lv-select-main {
        min-width: $paginator-width;
        padding: 0 $padding-xs 0 0;

        .lv-select-value {
          justify-content: center;
        }
      }

      .lv-select-clear,
      .lv-select-operation {
        width: $paginator-width;
        height: $paginator-height;
      }

      &.disabled {
        background: $paginator-select-disabled-bg-color;
      }
    }
  }

  &.disabled {
    .lv-paginator-deliver,
    .lv-paginator-total-page {
      color: $text-color-disabled;
    }
  }
}
